import React, { useEffect, useState } from 'react'
import logoSrc from '../../assets/logo.png'
import moreSrc from '../../assets/gengduo.png'
import xiazaiSrc from '../../assets/xiazai.png'
import tixingSrc from '../../assets/tixing.png'
import touxSrc from '../../assets/toux.png'
import tanchuSrc from '../../assets/tanchu.png'
import avaterSrc from '../../assets/avater.png'
import { Popover } from 'antd'
import './title.css'
import axios from 'axios'
const Title = () => {
  const [titleList, settitle] = useState([])

  const content = (
    <div className='titleBox'>
      <img className='top' src={tanchuSrc} alt="" />

      {titleList.map(((item: any, index) => {
        return <dl className='title_List' key={index}>
          <dt><img src={avaterSrc} alt="" /></dt>
          <dd>
            <p>{item.name}</p>
            <p>{item.value}</p>
          </dd>
        </dl>
      }))}

    </div>
  );
  useEffect(() => {
    axios.get('http://localhost:8090/titleList').then(res => {
      settitle(res.data.data)
    })
    const top=document.getElementById('titleCenter')
    window.addEventListener('scroll', scrollChange, true)
    scrollChange()
    return () => {
      window.removeEventListener('scroll', scrollChange, false)
    }
   
  }, [])

  const scrollChange = () => {
    // 监听滚动条距离顶部距离
    const top = document.getElementById('titleCenter')
    console.log(document.documentElement.scrollTop);

    if (document.documentElement.scrollTop >= 40) {
      top.style.display = 'none'

    }
    else {
      top.style.display = 'block'
    }
  }




  return (
    <div className='title_box'>
      <div className="title_left">
        <img src={logoSrc} className='logo' alt="" />
        <span className='ge'> |</span>
        <div className="switch">
          <span>用户名</span>
          <span>个人</span>
        </div>
      </div>
      <div className="title_center" id='titleCenter'>
        <div className="search">
          <input type="text" />
        </div>
      </div>
      <div className="title_right">
        <button className='vip'>会员现时服务</button>
        <button className='qyfw'>企业服务  </button>
        <Popover content={content}>
          <img className='fuwu1' src={moreSrc} alt="" />
        </Popover>
        <img className='fuwu2' src={xiazaiSrc} alt="" />
        <img className='fuwu3' src={tixingSrc} alt="" />
        <button className='cjsj'>创建设计</button>
        <img src={touxSrc} alt="" className='toux' />
      </div>

    </div>
  )
}

export default Title
function componentDidMount() {
  throw new Error('Function not implemented.')
}

